<template>
  <div class="guide">

    <!-- 倒计时 结束跳转main页面 -->
    <div class="dao" @click="gotopage('main')">
      <van-circle
        v-model="currentRate"
        color="#f50"
        :rate="rate"
        :speed="speed"
        :text="text"
        :size="120"
      />
    </div>

    <!--vant插件 轮播图 -->
    <van-swipe v-if="true" class="my-swipe" :autoplay="3000" indicator-color="red">
      <van-swipe-item v-for="(l, i) in imgs" :key='i'>
        <van-image :src="l" class="gimg"></van-image>
        <!-- 进入主页 -->
        <van-button type="primary" @click=" gotopage('main') " class="gbtn" v-if="i==imgs.length-1">进入电影主页</van-button>
      </van-swipe-item>
    </van-swipe>

    <!-- 封装轮播图 -->
     <my-swipe v-if="false" class="my-swipe" sid="banner1" :options="options" >
          <my-swipe-item v-for="(l,i) in imgs" :key="i">
              <van-image :src="l" class="gimg"></van-image>
               <!-- 翻页按钮 -->
              <van-button type="primary" @click="gotopage('main')" class="gbtn" v-if="i==imgs.length-1" >进入电影主页</van-button>
          </my-swipe-item>
    </my-swipe>

     <my-swipe v-if="false" class="my-swipe" sid="banners" :options="options" >
          <my-swipe-item v-for="(l,i) in imgs" :key="i">
              <van-image :src="l.imageUrl" class="gimg"></van-image>
              <van-button type="primary" @click="gotopage('main')" class="gbtn" v-if="i==banners.length-1" >进入电影主页</van-button>
          </my-swipe-item>
    </my-swipe>

  </div>
</template>

<script>
import {getWeek} from '@/utils'
import axios from 'axios'

export default {
  // components: { MySwipeItem },
  // 局部混入
  mixins: [],
  data() {
    return {
      imgs: [
        require('@/assets/img1.jpg'),
        require('@/assets/img2.jpg'),
        require('@/assets/img3.jpg'),
        require('@/assets/img4.jpg')
      ],
      currentRate: 0,
      rate: 100,
      speed: 20,
      options: {
        autoplay: {
          delay: 1000 // 1秒切换一次
        },
        observer: true,
        effect: 'cube', // 立体切换效果
        cubeEffect: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6
        }
      },
      banners: []
    }
  },
  methods: {
    getBanners() {
      this.$axios.get('http://47.104.209.44:3333/banner') // 网易云接口
      .then(res => {
        console.log(res)
        // this.$nextTick 
        // 在下次 DOM 更新循环结束之后执行延迟回调  setTimeout 
        this.$nextTick(() => {
          // DOM 更新了 插件实例化 
        this.banners = res.data.banners.slice(0,4)
        })
      })
    }
  },
  computed: {
    text() { // 计算倒计时 并显示
      return this.rate / this.speed - parseInt(this.currentRate / this.speed) + 'S'
    }
  },
  watch: {
    currentRate(v) {
      if(v == 100) {
        this.gotopage('main')
      }
    }
  },
  mounted() {
     this.getBanners()
    // 每周只显示三次 超过三次不再显示该页面 直接进入main页面
    // localStorage
    const week = getWeek()
    console.log(week)

    if(localStorage.week) {
      if(localStorage.week != week) {
        localStorage.week = week
        localStorage.pagecount = 0
      }
    } else {
      // 第一次
      localStorage.week = week;
    }

    if(localStorage.pagecount) {
      localStorage.pagecount++
      if(localStorage.pagecount > 3) {
        this.gotopage('main')
      }
    } else {
      // 第一次访问
      localStorage.pagecount = 1
    }
  }
}
</script>

<style lang="scss">

 .guide {
   .dao {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 666;
    ::v-deep .van-circle__text { // 在写了scoped的情况下 需加上::v-deep 防止样式穿透
      color: black !important;
    }
  }
   .my-swipe {
     width: 100%;
     height: 100%;
     .gimg {
       width: 100%;
       height: 100%;
     }
     .gbtn {
       position: absolute;
       bottom: 40px;
       left: 50%;
       transform: translate(-50%);
     }
   }
 }

</style>